
/* 
    当前Vue3项目基于vite搭建
        Vite是一种新型前端构建工具，能够显著提升前端开发体验。
        它主要由两部分组成：
        一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

        一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。


    功能:
        1. Vite 天然支持引入 .ts 文件。
        2. Vite 为 Vue 提供第一优先级支持：
            Vue 3 单文件组件支持：@vitejs/plugin-vue  (每一个.vue文件都是一个组件, tempalete  script(代码所及) style 当前组件样式)
            Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
            Vue 2.7 SFC 支持：@vitejs/plugin-vue2
            Vue 2.7 JSX support via @vitejs/plugin-vue2-jsx
        3. CSS Modules => 任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。
            允许使用import 语法导入css文件:   import classes from './example.module.css'
            也支持css预处理工具 (sass less stylus)  

        4. JSON => JSON 可以被直接导入 —— 同样支持具名导入：
            import json from './example.json'

        5. 静态资源处理 => 导入一个静态资源会返回解析后的 URL：
            import imgUrl from './img.png'


    当前项目特征:
        1. 单文件组件 (每一个.vue文件都是一个组件)
        2. 单页面应用 => 项目只有一个index.html页面, 所有内容都是根组件的子组件
        3. 模块化语法  => 支持各种语法模块化 (css  json images  )
        4. 可以使用各种加载/解析工具  
            .vue文件 => vue-loader 解析.vue文件
            sass语法 => sass-loader
            less语法 => less-loader



*/

// 全局引入css  => 对index.html直接生效
// import './assets/main.css'

import "./styles/reset.css"
import "./styles/index.css"

import { createApp } from 'vue' // 引入vue
import App from './App.vue'  // 作为模板挂载到 #app上
import router from './router' // 路由配置

const app = createApp(App) // 创建根实例(以App作为模板)

// app.config.globalProperties = { }  对象,存公共属性和方法 
app.config.globalProperties.$author = "老王";
app.config.globalProperties.$date = "2024/3/24";


app.config.globalProperties.$lgc = localStorage.getItem("lgc") || null;
app.config.globalProperties.$token = localStorage.getItem("token") || null;

app.use(router); // 使用路由插件


app.mount('#app') // 将创建的vue实例挂载到#app上
